<!DOCTYPE HTML>
<html>

<head>
    <meta charset="UTF-8">
    <title>IE</title>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-shim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/es5-shim/4.5.7/es5-sham.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/json3/3.3.2/json3.min.js"></script>
    <script src="https://unpkg.com/art-template@4.13.2/lib/template-web.js"></script>
    <style>
        .content {
            width: 1010px;
            height: auto;
            overflow-x: hidden;
            overflow-y: auto;
            border: 1px solid #d7d7d7;
            background: #ffffff;
            color: #495060;
            font-size: 14px;
            font-family: "Helvetica Neue", Arial, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif !important;
        }

        .title {
            font-size: 30px;
            color: #4a89dc;
            text-align: center;
            margin: 20px 0px 20px 0px;
        }

        .sub_title {
            font-size: 22px;
            text-align: center;
            margin: 20px 0px;
        }

        .but-group {
            text-align: center;
        }

        .btn {
            padding: 10px 20px;
            font-size: 14px;
            border-radius: 4px;
            color: #606266;
            background-color: #FFFFFF;
            border: 1px solid #DCDFE6;
            outline: none;
            cursor: pointer;
        }

        .btnActive {
            background-color: #409EFF;
            border-color: #409EFF;
            color: #fff;
        }

        #star {
            width: 100% !important;
            text-align: center;
            margin: 10px 0;
        }

        #star>img {
            width: 30px;
            height: 30px;
        }

        .form {
            width: 80%;
            margin: 15px auto;
        }

        .from-item {
            position: relative;
            margin-bottom: 10px;
        }

        .from-label {
            display: inline-block;
            width: 100px;
        }

        textarea {
            display: inline-block;
            width: 80%;
            height: 100px;
            box-sizing: border-box;
            padding: 10px;
            border: 1px solid #DCDFE6;
            outline: none;
            border-radius: 8px;
            resize: none;
        }

        .maxlength {
            position: absolute;
            bottom: 10px;
            right: 80px;
            font-size: 14px;
        }

        .btnCancel {
            color: #FFF;
            background-color: #F56C6C;
            border-color: #F56C6C;
        }

        .description {
            font-size: 16px;
            text-align: center;
        }

        .checkbox-group {
            width: 62%;
            margin: 10px auto;
            color: #6c6c6c;
        }

        .checkbox-item {
            font-size: 18px;
            margin-bottom: 5px;
        }

        input[type=checkbox] {
            color: #409EFF;
            font-size: 18px;
            transform: scale(1.2);
        }

        input[type=checkbox]:hover {
            color: #409EFF;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="content">
            <div class="title">全国一体化在线政务服务平台“好差评”</div>
            <div class="sub_title">整体满意度</div>
            <div class="rate-container">
                <div class="but-group score" id="score">
                    <!--                <button class="btn btnActive" data-score="5">非常满意</button>-->
                    <!--                <button class="btn" data-score="4">满意</button>-->
                    <!--                <button class="btn" data-score="3">基本满意</button>-->
                    <!--                <button class="btn" data-score="2">不满意</button>-->
                    <!--                <button class="btn" data-score="1">非常不满意</button>-->
                </div>
                <div id="star"></div>
                <div class="description">感谢您的评价！请您选择（可多选）评价理由，或填写文字评价，以帮助我们改进服务。</div>
                <div class="checkbox-group">
                    <!--                <div class="checkbox-item">-->
                    <!--                    <label for="2">-->
                    <!--                        <input type="checkbox" id="2" checked>-->
                    <!--                        在办事指南之外增加新的审批条件-->
                    <!--                    </label>-->
                    <!--                </div>-->
                </div>
                <div class="form">
                    <div class="from-item">
                        <span class="from-label" style="vertical-align: top">文字评价</span>
                        <textarea name="" placeholder="请输入内容" class="textarea" maxlength="50"
                            oninput="textareaFontLength()" onchange="this.value=this.value.substring(0, 50)"
                            onkeydown="this.value=this.value.substring(0, 50)"
                            onkeyup="this.value=this.value.substring(0, 50)"></textarea>
                        <div class="maxlength">
                            <span id="span_Font_Length">0</span>
                            <span>/</span>
                            <span>50</span>
                        </div>

                    </div>
                    <div class="from-item">
                        <span class="from-label">是否匿名</span>
                        <label for="">
                            <input type="radio" name="anonymous" value="1">是
                        </label>
                        <label for="">
                            <input type="radio" name="anonymous" value="2" checked>否
                        </label>
                    </div>
                    <div class="from-item">
                        <span class="from-label">是否公开</span>
                        <label for="">
                            <input type="radio" name="announce" checked value="1">是
                        </label>
                        <label for="">
                            <input type="radio" name="announce" value="2">否
                        </label>
                    </div>
                </div>
                <div class="but-group" style="margin-bottom: 30px">
                    <button type="button" class="btn btnActive confirmBtn">确定</button>
                    <button class="btn btnCancel" onclick="goBack()">取消</button>
                </div>
            </div>
        </div>
    </div>


</body>

<script id="evaluation" type="text/html">
   {{each resData item i}}
   <button class="btn btn{{i}}" onclick="onEvaluation({{item}},{{i}})">{{item.description}} + {{i}}</button>
   {{/each}}
</script>
<script id="evaluation2" type="text/html">
    {{each data item}}
    <div class="checkbox-item">
        <label for="{{item.id}}">
            <input type="checkbox" id="item.id" value="item.contentCode">
            {{item.content}}
        </label>
    </div>
    {{/each}}
</script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
    var resData = [
        {
            "level": "1",
            "description": "非常不满意",
            "organizationalCode": "610100000000",
            "contentList": [
                {
                    "id": "113",
                    "enable": 1,
                    "content": "在办事指南之外增加新的审批条件",
                    "contentCode": "108"
                },
                {
                    "id": "114",
                    "enable": 1,
                    "content": "需提供办事指南之外的申报材料",
                    "contentCode": "109"
                },
                {
                    "id": "115",
                    "enable": 1,
                    "content": "无理由超过法定办理时间",
                    "contentCode": "110"
                },
                {
                    "id": "116",
                    "enable": 1,
                    "content": "多头跑窗口和部门",
                    "contentCode": "113"
                },
                {
                    "id": "117",
                    "enable": 1,
                    "content": "服务态度差效率低",
                    "contentCode": "115"
                }
            ],
            "dimensionList": [
                {
                    "name": "服务规范性",
                    "contentList": []
                },
                {
                    "name": "服务便捷性",
                    "contentList": []
                },
                {
                    "name": "服务精确性",
                    "contentList": [
                        {
                            "id": "113",
                            "enable": 1,
                            "content": "在办事指南之外增加新的审批条件",
                            "contentCode": "108"
                        },
                        {
                            "id": "114",
                            "enable": 1,
                            "content": "需提供办事指南之外的申报材料",
                            "contentCode": "109"
                        }
                    ]
                },
                {
                    "name": "窗口服务",
                    "contentList": [
                        {
                            "id": "115",
                            "enable": 1,
                            "content": "无理由超过法定办理时间",
                            "contentCode": "110"
                        }
                    ]
                }
            ]
        },
        {
            "level": "2",
            "description": "不满意",
            "organizationalCode": "610100000000",
            "contentList": [
                {
                    "id": "108",
                    "enable": 1,
                    "content": "没有提供材料样本",
                    "contentCode": "207"
                },
                {
                    "id": "109",
                    "enable": 1,
                    "content": "没有提供材料清单",
                    "contentCode": "208"
                },
                {
                    "id": "110",
                    "enable": 1,
                    "content": "未在承诺时间内办结",
                    "contentCode": "209"
                },
                {
                    "id": "111",
                    "enable": 1,
                    "content": "窗口人员业务不熟练",
                    "contentCode": "213"
                },
                {
                    "id": "112",
                    "enable": 1,
                    "content": "服务态度生硬",
                    "contentCode": "214"
                }
            ],
            "dimensionList": [
                {
                    "name": "服务规范性",
                    "contentList": []
                },
                {
                    "name": "服务便捷性",
                    "contentList": []
                },
                {
                    "name": "服务精确性",
                    "contentList": [
                        {
                            "id": "108",
                            "enable": 1,
                            "content": "没有提供材料样本",
                            "contentCode": "207"
                        },
                        {
                            "id": "109",
                            "enable": 1,
                            "content": "没有提供材料清单",
                            "contentCode": "208"
                        },
                        {
                            "id": "110",
                            "enable": 1,
                            "content": "未在承诺时间内办结",
                            "contentCode": "209"
                        }
                    ]
                },
                {
                    "name": "窗口服务",
                    "contentList": []
                }
            ]
        },
        {
            "level": "3",
            "description": "基本满意",
            "organizationalCode": "610100000000",
            "contentList": [
                {
                    "id": "103",
                    "enable": 1,
                    "content": "一次性告知需要补正的材料",
                    "contentCode": "307"
                },
                {
                    "id": "104",
                    "enable": 1,
                    "content": "提供申报材料样本",
                    "contentCode": "308"
                },
                {
                    "id": "105",
                    "enable": 1,
                    "content": "在承诺的时间内办结",
                    "contentCode": "309"
                },
                {
                    "id": "106",
                    "enable": 1,
                    "content": "按办事指南要求的材料即可办理",
                    "contentCode": "311"
                },
                {
                    "id": "107",
                    "enable": 1,
                    "content": "服务态度一般",
                    "contentCode": "314"
                }
            ],
            "dimensionList": [
                {
                    "name": "服务规范性",
                    "contentList": []
                },
                {
                    "name": "服务便捷性",
                    "contentList": []
                },
                {
                    "name": "服务精确性",
                    "contentList": [
                        {
                            "id": "103",
                            "enable": 1,
                            "content": "一次性告知需要补正的材料",
                            "contentCode": "307"
                        },
                        {
                            "id": "104",
                            "enable": 1,
                            "content": "提供申报材料样本",
                            "contentCode": "308"
                        },
                        {
                            "id": "105",
                            "enable": 1,
                            "content": "在承诺的时间内办结",
                            "contentCode": "309"
                        }
                    ]
                },
                {
                    "name": "窗口服务",
                    "contentList": [
                        {
                            "id": "106",
                            "enable": 1,
                            "content": "按办事指南要求的材料即可办理",
                            "contentCode": "311"
                        }
                    ]
                }
            ]
        },
        {
            "level": "4",
            "description": "满意",
            "organizationalCode": "610100000000",
            "contentList": [
                {
                    "id": "98",
                    "enable": 1,
                    "content": "填写一张表单就可完成申报",
                    "contentCode": "406"
                },
                {
                    "id": "99",
                    "enable": 1,
                    "content": "在线提交材料窗口核验",
                    "contentCode": "407"
                },
                {
                    "id": "100",
                    "enable": 1,
                    "content": "一张清单告知全部申报材料",
                    "contentCode": "408"
                },
                {
                    "id": "101",
                    "enable": 1,
                    "content": "跑大厅一次办完",
                    "contentCode": "411"
                },
                {
                    "id": "102",
                    "enable": 1,
                    "content": "服务态度较好",
                    "contentCode": "413"
                }
            ],
            "dimensionList": [
                {
                    "name": "服务规范性",
                    "contentList": []
                },
                {
                    "name": "服务便捷性",
                    "contentList": [
                        {
                            "id": "98",
                            "enable": 1,
                            "content": "填写一张表单就可完成申报",
                            "contentCode": "406"
                        }
                    ]
                },
                {
                    "name": "服务精确性",
                    "contentList": [
                        {
                            "id": "99",
                            "enable": 1,
                            "content": "在线提交材料窗口核验",
                            "contentCode": "407"
                        },
                        {
                            "id": "100",
                            "enable": 1,
                            "content": "一张清单告知全部申报材料",
                            "contentCode": "408"
                        }
                    ]
                },
                {
                    "name": "窗口服务",
                    "contentList": [
                        {
                            "id": "101",
                            "enable": 1,
                            "content": "跑大厅一次办完",
                            "contentCode": "411"
                        }
                    ]
                }
            ]
        },
        {
            "level": "5",
            "description": "非常满意",
            "organizationalCode": "610100000000",
            "contentList": [
                {
                    "id": "93",
                    "enable": 1,
                    "content": "一窗受理一次办结",
                    "contentCode": "510"
                },
                {
                    "id": "94",
                    "enable": 1,
                    "content": "可以先受理后补材料",
                    "contentCode": "511"
                },
                {
                    "id": "95",
                    "enable": 1,
                    "content": "不用提交证明",
                    "contentCode": "512"
                },
                {
                    "id": "96",
                    "enable": 1,
                    "content": "可以就近办理",
                    "contentCode": "515"
                },
                {
                    "id": "97",
                    "enable": 1,
                    "content": "服务热情效率高",
                    "contentCode": "517"
                }
            ],
            "dimensionList": [
                {
                    "name": "服务规范性",
                    "contentList": []
                },
                {
                    "name": "服务便捷性",
                    "contentList": []
                },
                {
                    "name": "服务精确性",
                    "contentList": []
                },
                {
                    "name": "窗口服务",
                    "contentList": [
                        {
                            "id": "93",
                            "enable": 1,
                            "content": "一窗受理一次办结",
                            "contentCode": "510"
                        },
                        {
                            "id": "94",
                            "enable": 1,
                            "content": "可以先受理后补材料",
                            "contentCode": "511"
                        }
                    ]
                }
            ]
        }
    ]
    var curIndex = 4;
    // 模板渲染
    createElement()
    function createElement() {
        var T = template('evaluation', { resData: resData, curIndex: curIndex })
        $('.score').html(T)
        createElementCheckbox(resData[resData.length - 1].contentList);
         $(".score>button:last-child").addClass('btnActive');
    }

    function createElementCheckbox(contentList) {
        var T2 = template('evaluation2', { data: contentList })
        $('.checkbox-group').html(T2)

    }

    function onEvaluation(data,i,e) {
        console.log(data,i)
        createElementCheckbox(data.contentList);
        // curIndex = i;
        // var T = template('evaluation', {resData: resData, curIndex: curIndex })
        // $('.score').html(T)
        $('.score>.btn'+i).siblings().removeClass('btnActive')
        $('.score>.btn'+i).addClass('btnActive')
        
    }
</script>

</html>